import Icon from '@/components/Icon'
import styled from 'styled-components'

export const StyledWrap = styled.div`
	padding-bottom: 25px;
	.tip {
		color: #949799;
		margin-left: 30px;
	}
	.switch {
		flex: 0 0 40px;
	}
	.first-radio-item {
		margin-bottom: 20px;
	}
	.mediaReaource {
		align-items: start;
	}
	.double-flow-wrap {
		align-items: start;
		.once-checkbox {
			position: absolute;
			top: 0;
			left: 220px;
		}
	}
	.call_type {
		align-items: start;
	}
	.auto-call-options {
		position: absolute;
		display: flex;
		align-items: center;
		top: -4px;
		left: 228px;
		.call-input {
			margin-right: 10px;
			margin-left: 7px;
			.kd-input-error-msg,
			.kd-input-msg {
				white-space: nowrap;
			}
		}
	}
	.type-pop_icon {
		flex: 0 0 15px;
		margin-left: 14px;
	}
	.protocol_pop_icon {
		flex: 0 0 15px;
		margin-left: 5px;
	}
	.cascade-line {
		align-items: start;
		.other-options {
			position: absolute;
			bottom: -3px;
			left: 250px;
			display: flex;
			align-items: center;
			height: 23px;
			.text {
				padding: 3px;
				&.disabled {
					color: #949799;
				}
			}
			.cascade-input {
				.kd-input-error-msg,
				.kd-input-msg {
					white-space: nowrap;
				}
			}
			.multi-checkbox {
				margin-left: 50px;
			}
		}
	}
	.media-ability-line {
		align-items: start;
		.h265-check {
			display: flex;
			align-items: center;
			margin-bottom: 20px;
		}
		.media-select {
			display: flex;
			align-items: center;
			.self-input {
				margin: 0 10px 0 20px;
				.kd-input-msg,
				.kd-input-error-msg {
					white-space: nowrap;
				}
			}
			.self-select {
				margin-left: 20px;
			}
		}
		.sfu-media {
			display: flex;
			align-items: center;
			position: relative;
			top: -3px;
			& > span {
				margin-right: 20px;
			}
		}
	}

	.encryption-line {
		margin-bottom: 32px;
		.certificate-options {
			position: absolute;
			left: 105px;
			top: 28px;
		}
		.kd-input-msg,
		.kd-input-error-msg {
			white-space: nowrap;
		}
	}

	.keep-call-wrap {
		align-items: start;
		.label {
			line-height: 30px;
		}
	}
	.voice-inspire-wrap {
		.content {
			height: 23px;
		}
	}
	.conference-password-input {
		.kd-input-msg,
		.kd-input-error-msg {
			white-space: nowrap;
		}
	}
`

export const StyledPopWrap = styled.div`
	padding: 14px 16px;
	width: 358px;
	border: 1px solid #b3bbc3;
	background-color: #fff;
	color: #4e4e4e;
	font-size: 12px;
	line-height: 22px;
	border-radius: 6px;
	.pop-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e9eaeb;
		padding-bottom: 14px;
	}
	.pop-content {
		padding-top: 14px;
	}
	.pop-paragraph {
		margin-bottom: 14px;
	}
`
export const PopIcon = styled(Icon)`
	height: 15px;
	width: 15px;
	background-position: -75px -177px;
	&:hover,
	&.active {
		background-position: -90px -177px;
	}
`
export const CancelIcon = styled(Icon)`
	height: 15px;
	width: 15px;
	background-position: -3px -230px;
`
